setPage();

// 点击事件，事件委托
$('[name="container"]').click(function (e) {
    // 获取购物车信息
    const cart = JSON.parse(localStorage.cart);
    // 此时cart为数组形式
    // console.log(cart);
    if (e.target.getAttribute("name") === "chkall") {

        cart.forEach(function (item, key) {
            item.buy = e.target.checked;
        })
    }
    else if (e.target.getAttribute("name") === "other") {
        cart[e.target.getAttribute("index") - 0].buy = e.target.checked;
    }
    else if (e.target.getAttribute('name') === 'del') {
        // 从点击标签 索引下标 开始 数组中删除 1个单元
        cart.splice(e.target.getAttribute('index') - 0, 1);

        // 如果点击的是 - 标签
    } else if (e.target.getAttribute('name') === '减') {
        // 给索引下标相同的数据 num属性值 累减1


        cart[e.target.getAttribute('index') - 0].num--;



        // 如果点击的是 + 标签
    } else if (e.target.getAttribute('name') === '加') {
        // 给索引下标相同的数据 num属性值 累减1

        cart[e.target.getAttribute('index') - 0].num++;

    }


    //   // 新数组 设定 给 localStorage.cart 存储
    //   // cart数组要转化为 json字符串
    localStorage.cart = JSON.stringify(cart);
    //   // 调用函数 动态渲染生成页面
    setPage();
})






function setPage() {
    let type = 0;
   
    let money = 0;
    // 获取本地存储信息
    let cart = localStorage.cart;
    if (cart === undefined) {
        $('[name="container"]').html("请先创建购物车");
    } else {
        let bool = true;
        cart = JSON.parse(cart);
        if (cart.length === 0) {
            $('[name="container"]').html("购物车已经被清空，请选择商品加入");

        } else {
            // 动态生成页面
            // 开始部分
            let str = `
            
<div class="cart-wrap">
<div class="switch-cart">
    <div class="span6">
        <p class="name">您的购物车有如下商品：</p>
    </div>
        <div class="span6 tr">

</div>
</div>
<div id="cartcontainer">
<div class="cart-thead"><div class="cell c-checkbox">
<label for="">
    <input type="checkbox" name="chkall" ms-attr="{checked:##allChecked()}" ms-click="##clickAll($event)" value="全选" avalon-events="click:eclick_0_3535clickAll40$event41">全选
</label>
</div>
<div class="cell c-goods">商品信息</div>
<div class="cell c-price">单价（积分+元）</div>
<div class="cell c-quantity">数量</div>
<div class="cell c-sum">小计（积分+元）</div>
<div class="cell c-ops">操作</div></div>
       
`
            // 中间部分循环
            cart.forEach(function (item, key) {
                if (item.buy === false) {
                    bool = false;
                } else {
                    type++;
                   
                    money += item.max_price * item.num;
                }
                str +=
                    `
    <div class="cart-body" id="cart-body" style="position: relative;min-height: 170px;">
    <div class="cart-item-list">
        <div class="cart-item-cell">
            <div class="cell c-checkbox">
                <label for="">
                    <input name="other" type="checkbox" index="${key}" ${item.buy ? 'checked' : ''} ms-attr="{checked:el.IsSelect}" ms-on-click="el.checkboxChange(el.ShopCartSysNo)" avalon-events="click:eclick_0_el46checkboxChange40el46ShopCartSysNo41">
                </label>
                </div>
                <div class="cell c-goods">
                    <div class="goods-item">
                        <div class="p-img">
                            <a ms-if="!##product_from()" ms-attr="{href:'detail/'+(el.ProductKeySysNo || el.ProductSysNo)+'.html'}" target="_blank" href="detail/222532.html">
                                <img ms-attr="{src:_CONFIG_[__webState].ImgUrl + el.ProductPic}" width="100px" height="119px" src="${item.picUrl}">
                            </a><!--ms-if--></div>
                            <div class="item-msg">
                                <div class="p-name"><!--ms-if-->
                                    <a ms-if="!##product_from()" ms-attr="{href:'detail/'+(el.ProductKeySysNo || el.ProductSysNo)+'.html'}" target="_blank" href="detail/222532.html">${item.name}<br>
                                        <span ms-if="!##product_from()">属性：${item.stock_title}</span></a></div>
                                        <div class="p-err"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell c-price">
                                <div class="left">
                                    <p class="t1">积分</p>
                                    </div>
                                    <div class="right">
                                        <p class="price_PID ">
                                            <span class="add subScore" ms-click="el.reduceIntegral(el)" style="color:red" avalon-events="click:eclick_0_el46reduceIntegral40el41">-</span>
                                            <input class="input score" ms-attr="{value:el.CurrentIntegration}" ms-on-blur="el.integrationBlur($event,el)" type="text" avalon-events="blur:eblur_0_el46integrationBlur40$event44el41">
                                            <span class="add addScore" ms-click="el.addIntegral(el)" style="color:red" avalon-events="click:eclick_0_el46addIntegral40el41">+</span>
                                        </p>
                                        <p class="icon_plus"></p><p class="price_PID money red" style="text-align: left;">
                    现金
                    <span class="nowPrice">${item.max_price}</span>
                    <span>元</span>
                </p>
                <p class="tip">
                    积分调整范围
                    <span class="red">0-${item.max_point}</span><br>
                    调整积分范围,现金会随着积分加减而变化
                </p>
            </div>
        </div>
        <div class="cell c-quantity">
            <p class="price_PID">
                <button class="add subStock" name="减" index="${key}" ${item.num === 1 ? 'disabled' : ''} ms-click="el.reduce(el)" style="color:red" avalon-events="click:eclick_0_el46reduce40el41">-</button>
                <button class="cartnumtxt">${item.num}</button>
                <button class="add addStock" name="加" index="${key}" ${item.num === item.quanity ? 'disabled' : ''} ms-click="el.add(el)" style="color:red" avalon-events="click:eclick_0_el46add40el41">+</button>
            </p>
        </div>
        <div class="cell c-sum">
            <p class="price_show">
                <span class="small">积分</span>
                <span class="totalScore">0</span>
                <span class="small">分</span>
                <span class="small">+现金</span>
                <span class="totalPrice">${item.max_price}</span>
                <span class="small">元</span>
            </p>
        </div>
        <div class="cell c-ops" style="margin-top: 6px">
            <a href="javascript:;" class="delOrder" ms-click="el.remove(el)" avalon-events="click:eclick_0_el46remove40el41" name="del">
                删除
            </a>
        </div>
    </div>
</div>
<div ms-if="##Gifts" class="gifts"></div>
</div>
   
`});
            // 结尾部分
            str +=
                `
<div class="cart-thead cart-footer">
<div class="cell c-checkbox">
<label for="">
    <input type="checkbox" name="chkall" ms-attr="{checked:##allChecked()}" value="全选" ms-click="##clickAll($event)" avalon-events="click:eclick_0_3535clickAll40$event41">全选
    
</label>
</div>

<div class="cell c-pricest tr ">
<span class="font12">已选择
    <span id="howmanychk">${type}</span>件商品
</span>
</div>
<div class="cell c-quantity c-quantity-foot">总价:${money}</div>

<div class="coupon_info"></div>

</div>
</div>
</div>
<div class="clear"></div>
`

            $('[name="container"]').html(str);
            $('[name="chkall"]').prop("checked", bool);
        }

    }
}